<template>
	<page class="device">
    <page-header>
      <x-header :left-options="{backText: ''}">设备管理
        <a slot="right">
          <router-link :to="{path:'/devicefilter'}" style='color: #fff;'>
            <i class="iconfont icon-shaixuanguolv"></i>
          </router-link>
        </a>
      </x-header>
      <div class="search-wrap">
        <search v-model="search.mainCode" @input="handleInput" placeholder="请输入搜索设备统一编号"></search>
      </div>
    </page-header>
    <page-content class="inner" :scroll="true" @refresh="refresh" @infinite="infinite">
      <loading v-if="empty" :loading="loading" :empty="empty"></loading>
      <div v-else>
        <card class="warning device-item" v-for="item in list" :key="item.id" @click.native="deviceDetail(item.id, item.deviceType)">
          <card-header>
            <i slot="icon" class="icon iconfont"></i>
            <span slot="title">{{'塔式起重机'}}</span>
          </card-header>
          <card-content>
            <div class="grid">
              <div class="grid-item">
                <label class="label">统一编号：</label>
                <span class="vlaue color-blue">{{item.mainCode}}</span>
              </div>
              <div class="grid-item">
                <label class="label">设备类型：</label>
                <span class="vlaue">{{item.apiDeviceType}}</span>
              </div>
              <div class="grid-item" v-if="item.deviceType == 1">
                <label class="label">主机型号：</label>
                <span class="vlaue">{{item.manufacturerModel.manufacturerModel}}</span>
              </div>
              <div class="grid-item" v-else>
                <label class="label">部件型号：</label>
                <span class="vlaue">{{item.manufacturerModel.manufacturerModel}}</span>
              </div>
              <div class="grid-item">
                <label class="label">设备状态：</label>
                <span class="vlaue" :class="{'color-green': item.deviceStatus == '1', 'color-red': item.deviceStatus == '3'}">{{item.apiDeviceStatus}}</span>
              </div>
              <div class="grid-item h-full">
                <label class="label">管理单位：</label>
                <span class="vlaue">{{item.manageOffice.shortName}}</span>
              </div>
              <div class="grid-item h-full">
                <label class="label">产权单位：</label>
                <span class="vlaue">{{item.manufacturer.shortName}}</span>
              </div>
              <div class="grid-item h-full">
                <label class="label">所属仓库：</label>
                <span class="vlaue">{{item.warehouse.name}}</span>
              </div>
            </div>
          </card-content>
        </card>
      </div>
    </page-content>
	</page>
</template>

<script>
import { mapGetters } from 'vuex'
import { XHeader } from 'vux'
import Search from '@components/common/Search'
import { device } from '@service'

export default {
  name: 'DeviceList',
  components: {
    XHeader,
    Search
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/info',
      token: 'user/token',
      filterParams: 'filter/params'
    }),
    userId () {
      return this.userInfo.id
    },
    empty () {
      return this.list.length === 0
    }
  },
  data () {
    return {
      value: '',
      bianhao: '',
      page: {
        count: 1,
        pageNo: 1,
        pageSize: 20
      },
      search: {
        mainCode: ''
      },
      list: [],
      loading: false
    }
  },
  methods: {
    // input查询
    handleInput () {
      this.loadData()
    },
    async refresh () {
      await this.loadData()
    },
    // 上拉加载更多
    async infinite () {
      this.page.pageNo += 1
      await this.loadData()
    },
    async loadData () {
      let token = this.token
      let userId = this.userInfo.id
      let params = {token, userId, ...this.page, ...this.search}
      params = Object.assign(params, this.filterParams)
      try {
        this.loading = true
        let data = await device.list(params)
        this.list = data.list || []
        this.page.count = data.count
        this.loading = false
      } catch (error) {
        console.log(error)
        this.loading = false
      }
    },
    deviceDetail (id, deviceType) {
      // console.log(id)
      const router = this.$router
      router.push({
        path: '/device/' + id
      })
    }
  },
  watch: {
    'search.mainCode' () {
      this.loadData()
    }
  },
  created () {
    this.loadData()
  },
  activated () {
    this.loadData()
  }
}
</script>

<style lang="scss">
.device {
  &.view .page.has-header {
    padding-top: 7rem;
  }
  .page-header {
    height: 4rem +  3rem!important;
  }
  .search-wrap {
    background: #1e82d2;
    padding: 0, 0.5rem;
    box-sizing: border-box;

    input {
      color: #fff;
      width: 100%;
    }
    .search {
      background: #1a72b9;
      border: none;
      height: 2rem;
      text-align: center;
      line-height: 2rem;
    }

    .search::-webkit-input-placeholder {
      color: #fff;
      font-size: 0.8rem;
      line-height: 1.2rem;
    }
  }
  .card .card-content .grid .grid-item .label {
    width: 5rem;
  }
}
</style>
